<template>
  <div>
    <van-sticky>
      <!-- 搜索 -->
      <form action="/">
        <van-search
          v-model="par.keyword"
          shape="round"
          background="#4fc08d"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </form>
      <!-- 二级分类 -->
      <van-tabs v-if="children.length > 0" sticky @click="onClick">
        <van-tab title="全部"></van-tab>
        <van-tab
          v-for="(item, i) in children"
          :key="i"
          :title="item.cate_name"
        />
      </van-tabs>
      <div class="goodnav flex-grow">
        <div class="item flex-center flex-grow-1" @click="set_where(1)">
          价格
          <img
            src="@/assets/images/sort1.png"
            v-if="par.priceOrder == 'desc'"
          />
          <img src="@/assets/images/sort3.png" v-if="par.priceOrder == 'asc'" />
          <img src="@/assets/images/sort2.png" v-if="par.priceOrder == ''" />
        </div>
        <div class="item flex-center flex-grow-1" @click="set_where(2)">
          销量
          <img
            src="@/assets/images/sort1.png"
            v-if="par.salesOrder == 'desc'"
          />
          <img src="@/assets/images/sort3.png" v-if="par.salesOrder == 'asc'" />
          <img src="@/assets/images/sort2.png" v-if="par.salesOrder == ''" />
        </div>
        <!-- down -->
        <div
          class="item flex-center flex-grow-1"
          :class="par.news ? 'font-color-red' : ''"
          @click="set_where(3)"
        >
          新品
        </div>
      </div>
    </van-sticky>
    <!-- 商品列表 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <GoodList :list="dataList" />
        </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
import { getcategory, getproducts } from "@/api/goods.js";
import GoodList from "@/components/GoodList";
export default {
  components: {
    GoodList,
  },
  data() {
    return {
      title: "商品列表",
      children: [],
      option1: [
        { text: "价格排序", value: 0 },
        { text: "升序", value: 1 },
        { text: "降序", value: 3 },
      ],
      option2: [
        { text: "销量排序", value: 0 },
        { text: "从高到低", value: 1 },
        { text: "从低到高", value: 2 },
      ],
      option3: [
        { text: "是否新品", value: 0 },
        { text: "是", value: 1 },
        { text: "否", value: 2 },
      ],
      par: {
        sid: null,
        cid: null,
        keyword: null, //搜索关键词
        priceOrder: "",
        salesOrder: "",
        news: false,
        page: 0,
        limit: 10,
      },
      dataList: [], //商品列表
      loading: false, //是否显示加载状态
      finished: false, //是否有下一页数据
      refreshing: false, //下拉刷新
      price: 0,
      stock: 0,
      nows: 0,
    };
  },
  metaInfo() {
    return {
      title: this.title,
      meta: [],
    };
  },
  mounted() {
    this.title = this.$route.query.title;
    this.par.cid = Number(this.$route.query.cid);
    this.$nextTick(() => {
      this.getdata();
    });
  },
  created() {},
  methods: {
    async getdata() {
      try {
        const back = await getcategory();
        if (back.status == 200) {
          let list = back.data.filter((item) => {
            return item.id == this.par.cid;
          });
          this.children = list[0].children;
        }
      } catch (err) {
        console.error(err);
      }
    },
    // 上拉加载
    onLoad() {
      if (this.refreshing) {
        this.reset();
        this.refreshing = false;
      }
      this.par.page++;
      this.getgoodlist();
    },
    getgoodlist() {
      getproducts(this.par).then((res) => {
        if (res.status == 200) {
          this.loading = false;
          if (res.data.length > 0) {
            res.data.forEach((element) => {
              this.dataList.push(element);
            });
          } else {
            this.finished = true;
          }
        }
      });
    },
    // 搜索
    onSearch(val) {
      this.reset();
      this.onRefresh();
    },
    // 点击分类
    onClick(i, title) {
      if (i === 0) {
        //选中全部相当于重置当前页面数据
        this.par.sid = null; //二级菜单id
        this.onSearch();
      } else {
        console.log(i - 1);
        this.par.sid = this.children[i - 1].id;
        this.onSearch();
      }
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 重置数据
    reset() {
      this.par.page = 0;
      this.dataList = [];
    },
    //点击事件处理
    set_where: function(index) {
      let that = this;
      switch (index) {
        case 1:
          if (that.par.priceOrder == "") that.par.priceOrder = "asc";
          else if (that.par.priceOrder == "asc") that.par.priceOrder = "desc";
          else if (that.par.priceOrder == "desc") that.par.priceOrder = "";
          that.par.salesOrder = "";
          console.log(this.par.priceOrder);
          break;
        case 2:
          if (that.par.salesOrder == "") that.par.salesOrder = "asc";
          else if (that.par.salesOrder == "asc") that.par.salesOrder = "desc";
          else if (that.par.salesOrder == "desc") that.par.salesOrder = "";
          that.par.priceOrder = "";
          break;
        case 3:
          that.par.nows = !that.par.nows;
          break;
        default:
          break;
      }
      this.onSearch();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
